<include file="__PUBLIC__/header"/>
<div class="page-container">
    <form class="form form-horizontal" id="form" method="post"
          action="{|U:'add'}','{|U:'index',array('mid'=>$model['mid'])}">
        <input type="hidden" name="mid" value="{$model.mid}"/>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">模型：</label>
            <div class="formControls col-xs-6 col-sm-6">
                {$model.model_name}
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">类型：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <div class="select-box">
                    <select id="field_type" name="field_type" class="select">
                        <option value="input">单行文本(input)</option>
                        <option value="textarea">多行文本(textarea)</option>
                        <option value="number">数字</option>
                        <option value="box">选项(radio)</option>
                        <option value="editor">编辑器</option>
                        <option value="image">图片上传</option>
                        <option value="images">多图片上传</option>
                        <option value="datetime">日期与时间</option>
                        <option value="files">文件上传</option>
                    </select>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>置于表：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="radio-box">
                    <input type="radio" name="table_type" id="table_type-1" value="1">
                    <label for="table_type-1">主表</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="table_type" id="table_type-2" value="2">
                    <label for="table_type-2">副表</label>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>标题：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="例如：文章作者" name="title" datatype="*"
                       nullmsg="请填写标题"/>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>数据库字段名：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="例如：author" name="field_name" datatype="*"
                       nullmsg="请填写数据库字段"/>
            </div>
            <div class="col-xs-3 col-sm-3">必须为英文小写字母</div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">字段提示：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <textarea class="textarea" placeholder="请填写字段提示信息" name="tips"
                          onkeyup="textarealength(this,100)"></textarea>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="field_tpl" style="margin: 10px;padding-bottom:10px;border: dashed 1px #444444">
        <!--QZLOG自定义字段设置项-->
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">表单样式名：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" value="" name="css"/>
            </div>
            <div class="col-xs-3 col-sm-3">定义表单的CSS样式名</div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">字符长度取值范围：</label>
            <div class="formControls col-xs-6 col-sm-6">
                最小值：
                <input type="text" name="minlength" class="input-text" value="0" style="width:30%;"/>
                最大值：
                <input type="text" name="maxlength" class="input-text" style="width:30%;"/>
            </div>
            <div class="col-xs-3 col-sm-3">如果不想限制长度请留空</div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">表单验证：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text input_validation" value="" name="validate" style="width:50%;"/>
                <select id="field_check" class="select" style="width:40%;">
                    <option value="">常用正则</option>
                    <option value="/^[0-9.-]+$/">数字</option>
                    <option value="/^[0-9-]+$/">整数</option>
                    <option value="/^[a-z]+$/i">字母</option>
                    <option value="/^[0-9a-z]+$/i">数字+字母</option>
                    <option value="/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/">E-mail</option>
                    <option value="/^[0-9]{5,20}$/">QQ</option>
                    <option value="/^http:\/\//">超级链接</option>
                    <option value="/^(1)[0-9]{10}$/">手机号码</option>
                    <option value="/^[0-9-]{6,13}$/">电话号码</option>
                    <option value="/^[0-9]{6}$/">邮政编码</option>
                </select><span id="hd_set[validation]"></span>
            </div>
            <div class="col-xs-3 col-sm-3">不想校验数据请留空</div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">必须输入？：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="radio-box">
                    <input type="radio" name="required" id="required-0" value="1">
                    <label for="required-0">是</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="required" id="required-1" value="0">
                    <label for="required-1">否</label>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3">如果表单必须设置值时选择‘是’</div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">错误提示：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" value="" name="error"/>
            </div>
            <div class="col-xs-3 col-sm-3">输入内容不正确时的提示信息</div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">值唯一？：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="radio-box">
                    <input type="radio" name="isunique" id="issearch-0" value="1">
                    <label for="issearch-0">是</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="isunique" id="issearch-1" value="0">
                    <label for="issearch-1">否</label>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">作为基本信息？：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="radio-box">
                    <input type="radio" name="isbase" id="issearch-0" value="1">
                    <label for="issearch-0">是</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="isbase" id="issearch-1" value="0">
                    <label for="issearch-1">否</label>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3">基本信息将在添加页面左侧显示</div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">作为搜索条件？：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="radio-box">
                    <input type="radio" name="issearch" id="issearch-0" value="1">
                    <label for="issearch-0">是</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="issearch" id="issearch-1" value="0">
                    <label for="issearch-1">否</label>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">在前台投稿中显示？：</label>
            <div class="formControls col-xs-6 col-sm-6 skin-minimal">
                <div class="radio-box">
                    <input type="radio" name="isadd" id="isadd-0" value="1">
                    <label for="isadd-0">是</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="isadd" id="isadd-1" value="0">
                    <label for="isadd-1">否</label>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3">前台用户投稿显示该字段</div>
        </div>


        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="submit" class="btn btn-primary radius"><i class="iconfont icon-duigou1"></i> 提交</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
<include file="__PUBLIC__/footer"/>
<script>
    $(function () {
        //默认选中
        $("[name='table_type'][value='1']").attr("checked", true);
        $("[name='required'][value='0']").attr("checked", true);
        $("[name='isunique'][value='0']").attr("checked", true);
        $("[name='isbase'][value='1']").attr("checked", true);
        $("[name='issearch'][value='0']").attr("checked", true);
        $("[name='isadd'][value='0']").attr("checked", true);

        //单选框样式
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret) {
                ajax_progress(ret);

            }
        });
    });
    $("#field_type").change(function () {
        /**
         * 字段类型
         * @type {*|jQuery}
         */
        var field_type = $(this).val();
        $.ajax({
            url: '{|U:"getAddFieldTpl"}',
            type: "POST",
            data: {
                action: 'add',
                field_type: field_type,
                mid: '{$hd.get.mid}'
            },
            success: function (data) {
                $(".field_tpl").html(data);
            }
        })
    });

    /**
     * 加载时触发
     */
    $("#field_type").trigger("change");
    /**
     * 表单验证切换
     */
    $("#field_check").change(function () {
        $("[name='validate']").val($(this).val());
    });
</script>
</body>
</html>

